<!--
 * @Author: huang liang miao 1127255342@qq.com
 * @Date: 2024-11-29 13:43:09
 * @LastEditors: 熊志伟 xiongzhiwei
 * @LastEditTime: 2024-12-02 15:59:04
 * @FilePath: \dcy-webd:\webCode\dcyCode\scientific_research_manager_web\src\components\BulkImport\index.vue
 * @Description: 批量导入
-->
<script setup lang="ts">

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  fileName: {
    type: String,
    default: '导入字典'
  },
  url: {
    type: String,
    default: ''
  },
  loading: {
    type: Boolean,
    default: false
  },
})

const emits = defineEmits(['cancel', 'submit'])
const excelResult = ref() // 解析结果

function fileInfo(item){
  if(item){
    excelResult.value = item
  }
}
// 提交导入
function submit() {
  emits('submit', excelResult.value)
}

</script>

<template>
  <el-dialog v-model="props.visible" :title="props.fileName" width="600px" align-center @close="emits('cancel', false)">
    <FileUpload :is-show-tip="false" :drag="true" :limit="1" :fileType='["xls", "xlsx"]' needParse @file-info="fileInfo" />
    <template #footer>
      <div class="dialog-footer">
        <a class="download" :href="props.url" :download="`${props.fileName}模板.xlsx`">下载导入模板</a>
        <div>
          <el-button @click="emits('cancel', false)">取消</el-button>
          <el-button type="primary" :loading="props.loading" :disabled="!excelResult" @click="submit">导入</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
@import "@/assets/styles/variables.module.scss";
.dialog-footer {
  @apply: flex justify-between items-center;
}
.download{
  @apply: text-[$--color-primary];
}
</style>